@import 'main';

@import 'board/note';
@import 'board/apistatus';
@import 'board/filters';
@import 'project/projectedit';
@import 'board/topbuttons';
@import 'project/todo';
@import 'project/archive-confirm';
@import 'project/todoedit';



.board{
  width:100%;
  height: calc(100vh - 100px);
  overflow-y: hidden;
  white-space: nowrap;
  padding: 0 20px;

  .column{
    width: 300px;
    height: calc(100vh - 110px);
    white-space: normal;
    display: inline-block;
    overflow: hidden;
    padding: 5px 10px;

    &.droppable{
      background-color: #eee;
      h3{
        text-decoration: underline;
      }
    }

    .column-inner-well{
      max-height: calc(100vh - 140px);
      overflow-y: scroll;
      &::-webkit-scrollbar {
        display:none;
      }
    }



    h3{
      font-size: 16px;
      font-family: monospace;
      font-weight: normal;
      margin: 5px 0 0;
      padding-bottom: 5px;
    }


    .project{

      @import 'project/links';
      @include box_shadow(2);

      margin: 10px 5px 20px 0;
      padding: 10px 30px 20px 20px;
      background-color: white;
      position: relative;
      border-left: 1px solid #eee;

      &.transparent{
        opacity: .6;
      }
      .drag-handle{
        width: 15px;
        height: 40px;
        position: absolute;
        right: 5px;
        top: calc(50% - 20px);
        cursor: move;
        cursor: grab;
        &:hover .drag-dots{
          color: #333;
        }
        .drag-dots{
          height: 10px;
          line-height: 0px;
          color: lightgrey;
          text-align: center;
          margin-top: 0px;
        }
      }
      .title{
        small{
          font-family: $sans;
          color: grey;
          font-size: 12px;
        }
      }
      h4{
        font-style: italic;
        font-weight: bold;
        margin-top: 0;
        margin-bottom: 2px;
      }
      .description{
        overflow-x: hidden;
        text-overflow: ellipsis;
        p{
          font-size: 14px;
          line-height: 18px;
        }
      }

      .top-buttons{
        i.fa-pencil{
          position: absolute;
          top: 10px;
          right: 10px;
          color: lightgrey;
          cursor: pointer;
          transition: all .2s;
          &:hover{
            top: 5px;
            right: 5px;
            color: $edit;
            font-size: 24px;
          }
        }
        i.fa-sticky-note-o{
          position: absolute;
          top: 35px;
          right: 5px;
          font-size: 18px;
          color: lightgrey;
          cursor: pointer;
          transition: all .2s;
          &:hover{
            font-size: 24px;
            top: 30px;
            right: 0;
            color: $notes;
          }
        }
        i.fa-trash-o{
          position: absolute;
          top: 62px;
          right: 9px;
          font-size: 18px;
          color: lightgrey;
          cursor: pointer;
          transition: all .2s;
          &:hover{
            font-size: 24px;
            top: 57px;
            right: 7px;
            color: $archive;
          }
        }
      }

      .people{
        margin-bottom: 10px;
        .col{
          width: 33.33%;
          float:left;
          h6{
            margin-bottom: 0;
          }
          ul{
            list-style-type: none;
            list-style-position: outside;
            font-family: $sans;
            font-size: 12px;
            margin:0;
            padding:0;
            .empty{
              font-weight: bold;
              color: #999;
            }
            li{
              overflow: hidden;
              text-overflow: ellipsis;
            }
          }
        }
        &:after{
          content: "";
          display: table;
          clear: both;
        }
      }

      .tags{
        margin-bottom: 8px;
        &:after{
          content: "";
          display: table;
          clear: both;
        }
        .tag{
          font-family: $sans;
          padding: 1px 3px;
          font-size: 11px;
          display: inline-block;
          color: white;
          background-color: #aaa;
          letter-spacing: .5px;
          margin-right: 5px;
        }
      }

      .type-block{
        display: inline-block;
        position: absolute;
        bottom: 0;
        right: 0;
        font-family: $sans;
        color: white;
        padding: 1px 7px;
        text-transform: uppercase;
        font-size: 12px;
      }
      .color-border{
        position: absolute;
        height: 1px;
        width: 100%;
        bottom: 0;
        left: 0;
      }

    }

  }
}
